<template>
  <div>
    解约协议编号<el-input v-model="form.terminationNo" placeholder="请输入解约协议编号" style="width: 200px;"></el-input>
    <br>小区名称<el-input v-model="form.preminseName" placeholder="请输入小区名称" style="width: 200px;"></el-input>
    <br>录入人<el-input v-model="form.userName" placeholder="情输入录入姓名" style="width: 200px;"></el-input>
    <div class="block">
      <span class="demonstration">协议录入日期</span>
      <el-date-picker
        v-model="form.t1"
        type="date"
        placeholder="开始">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">协议录入日期</span>
      <el-date-picker
        v-model="form.t2"
        type="date"
        placeholder="结束">
      </el-date-picker>
    </div>
    <el-button @click="getSfContract" type="primary">查询</el-button>
    <el-button @click="chongzhi" type="primary">重置</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="terminationNo"
        label="解约协议编号"
        width="180">
      </el-table-column>
      <el-table-column
         prop="preminseName"
        label="小区"
        width="180">
      </el-table-column>
      <el-table-column
        prop="terminationType"
        label="解约类型">
      </el-table-column>
      <el-table-column
        prop="terminationDate"
        label="解约日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="inputDate"
        label="审核日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="finalStement"
        label="结算金额"
        width="180">
      </el-table-column>
      <el-table-column
        prop="inputDate"
        label="录入时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="操作人"
        width="180">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[4, 8, 16, 32]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { list } from "@/api/puthome/sfContract"
    export default {
      data() {
        return {
          tableData: [],
          currentPage4: 1,
          // 总条数
          total: 0,
          // 查询参数
          form: {
            t1:'',
            t2:'',
            pageNum: 1,
            pageSize: 4,
            userName:'',
            preminseName:'',
            terminationNo:'',
          },
        }
      },
      created() {
        this.getSfContract();
      },
      methods:{
        chongzhi(){
            this.form.t1='',
            this.form.t2='',
            this.form.pageNum= 1,
            this.form.pageSize= 4,
            this.form.userName='',
            this.form.preminseName='',
            this.form.terminationNo='';
            this.getSfContract()
        },
        getSfContract(){
          list(this.form).then(ref=>{
            console.log(ref)
            this.tableData=ref.rows
            this.total=ref.total
          })
        },
        handleSizeChange(val) {
          this.form.pageSize=val
          console.log(`每页 ${val} 条`);
          this.getSfContract()
        },
        handleCurrentChange(val) {
          this.form.pageNum=val
          console.log(`当前页: ${val}`);
          this.getSfContract()
        },
      }
    }
</script>

<style scoped>

</style>
